<template>
    <div class="browse">
        <div class="moduleHead">
            <router-link v-if="userInfo.status.isGuest == 1" :to="{ name: 'upgrade' }">
                <span class="icon_gold"></span>
            </router-link>
            <div class="headNav">
                <span class="active">{{language.browse_serach}}</span>
                <router-link :to="{name:'letsMeet'}">
                    <span>{{language.browse_spark}}</span>
                </router-link>
            </div>
            <span class="right rightActive" v-on:click="gotoFilter">{{language.browse_filter}}</span>
        </div>
        <div class="body" ref='divScrollListen'>
            <promptTip :props="promptData"></promptTip>
            <ul class="userlist">
                <template v-for="(item,index) in items">
                    <div v-if="[10,20,30].indexOf(index) > -1 && userInfo.status.isGuest == 1" class="bannerUpgrade main_bg">
                        <p>{{language.browse_bannerUpgradeP}}</p>
                        <router-link :to="{ name: 'upgrade'}">
                            <button class="btn main_color">{{language.unify_learnMore}}</button>
                        </router-link>
                    </div>
                    <li v-on:click="gotoUserProfile(item.usr_id)">
                        <div class="avatar" :class="getGenderBgClass(item.gender)">
                            <div :class="parseInt(item.online) ? 'onlineOn' : ''"></div>
                            <LazyImg :src="filterGenderImg(item.picture.icon)"></LazyImg>
                        </div>
                        <div class="infobox">
                            <div class="namebox"> {{ item.username }} </div>
                            <div class="addressbox">{{ageCityStr(item)}}</div>
                            <!-- <div class="decbox">{{ item.headline }}</div> -->
                        </div>
                    </li>
                </template>
            </ul>
            <loading :props="{show:loading}"></loading>
        </div>
        <navBottom></navBottom>
    </div>
</template>
<script>
import globalMixin from '../common/globalMixin'
import * as API from '../api';
import navBottom from './NavBottom'
import LazyImg from './LazyImg'
import loading from './Loading'
import promptTip from './PromptTip'

let firstLoad = true,
    searchOptions = {},
    userList = []; //局部大对象数组变量

export default {

    name: 'browse',

    mixins: [globalMixin],

    data() {
        return {
            loading: 0,
            userListIndex: [],
            promptData: {},
        }
    },

    components: {
        navBottom,
        LazyImg,
        loading,
        promptTip
    },

    computed: {

        userInfo() {
            return this.$store.state.user.userInfo;
        },

        items: function() {
            let data = [];
            for (let i in this.userListIndex) {
                data.push(userList[i]);
            }
            return data;
        },
    },

    created() {
        //console.log('created', 'initSearch', this);
        searchOptions = this.getSearchOptions();
        this.initSearch();
    },

    activated() {
        this.isResetLoad();
        this.setSiteNavBottom('browse', this.$route.name);
    },

    methods: {

        ageCityStr(item) {
            return this.formatUserLocation({
                age: item.age,
                city: item.city,
                state: item.state,
                country: item.country,
            });
        },

        isResetLoad() {
            let reloadSearchOptions = this.getSearchOptions();
            if (reloadSearchOptions && reloadSearchOptions.reload) {
                userList = [];
                this.promptData = {};
                this.userListIndex = [];
                searchOptions = reloadSearchOptions;
                this.initSearch();
                firstLoad = true;
                delete reloadSearchOptions.reload;
                //console.log(JSON.stringify(searchOptions));
                Unit.setSessionStorage('ms_search_options', JSON.stringify(searchOptions));
            }
        },

        iconStyle: function(val) {
            return 'background-image: url(' + val + ')';
        },

        getSearchOptions() {
            let data = Unit.getSessionStorage('ms_search_options');
            if (data) {
                data = JSON.parse(data);
            }
            return data;
        },

        initSearch() {
            let tthis = this;
            this.loading = 1;
            if (!searchOptions) {
                API.get_last_search({
                    data: {},
                    success: (response) => {
                        searchOptions = response;
                        Unit.setSessionStorage('ms_search_options', JSON.stringify(searchOptions));
                        tthis.getLastSearchOptionCallback();
                    }
                });
            } else {
                this.getLastSearchOptionCallback();
            }
        },

        getLastSearchOptionCallback() {
            this.loading = 0;
            searchOptions.page_num = 0
            searchOptions.offset = 30;
            delete searchOptions.hst_id;
            if (typeof(searchOptions.match_gender) != 'undefined' && parseInt(searchOptions.match_gender) == 0 && typeof(searchOptions.search_type) == 'undefined') {
                delete searchOptions.match_gender;
            }
            this.getUserList();
        },

        getUserList() {
            let tthis = this;
            if (this.loading == 0) {
                this.loading = 1;
                API.match_filter({
                    data: searchOptions,
                    success: (response) => {
                        //response.list = [];
                        //console.log(searchOptions.page_num);
                        if (response.list.length == 0 && searchOptions.page_num == 0) {
                            if(searchOptions.search_type == 2){
                                tthis.promptData = {
                                    type: 'noico',
                                    title: tthis.language.browse_nameNoInfoTitle,
                                    content: tthis.language.browse_nameNoInfoContent,
                                    btn: {
                                        label: tthis.language.browse_noInfoBtn,
                                        callback: function() {
                                            tthis.$router.push('/filter');
                                        }
                                    }
                                };
                            }else{
                                tthis.promptData = {
                                    type: 'noico',
                                    title: tthis.language.browse_noInfoTitle,
                                    content: tthis.language.browse_noInfoContent,
                                    btn: {
                                        label: tthis.language.browse_noInfoBtn,
                                        callback: function() {
                                            tthis.$router.push('/filter');
                                        }
                                    }
                                };
                            }
                            tthis.loading = 0;
                        } else if (response.list.length == 0) {
                            tthis.loading = 3;
                        } else {
                            tthis.loading = 0;
                            tthis.getUserListCallback(response);
                        }
                    }
                });
            }
        },

        getUserListCallback(response) {
            let tthis = this;
            if (response.list && response.list.length > 0) {
                _.forEach(response.list, function(n, key) {
                    tthis.userListIndex.push(key);
                });
                userList = userList.concat(response.list);
                firstLoad = false;
                searchOptions.page_num = parseInt(searchOptions.page_num) + 1;
                searchOptions.hst_id = response.hst_id;
            }
            //console.log('loading ok', this.userListIndex, userList, searchOptions);
        },

        gotoFilter() {
            this.$router.push({
                'name': 'filter'
            });
        },

        onDivBottomScroll: function(e) {
            if (this.$route.name == 'browse') {
                this.getUserList();
            }
        }
    },

}

</script>
<style scoped>
.browse {
    width: 100%;
    background: #fff;
    padding-top: 44px;
    padding-bottom: 50px;
}

.browse .moduleHead .tab {
    width: 60px;
    border: 1px solid #fff;
    line-height: 10px;
    padding: 8px;
    margin-top: 8px;
    font-size: 14px;
    display: inline-block;
}

.browse .moduleHead .tab_left {
    border-radius: 20px 0 0 20px;
}

.browse .moduleHead .tab_right {
    border-radius: 0 20px 20px 0;
}

.browse .moduleHead .action {
    background: #fff;
    color: #666;
}

.browse .moduleHead .right {
    position: absolute;
    width: 60px;
    top: 0;
    right: 0;
    height: 44px;
    line-height: 44px;
    font-size: 18px;
}

.browse .bannerUpgrade {
    width: calc(100% - 20px);
    float: left;
    margin: 0 10px 10px;
    padding: 14px;
    color: #fff;
    border-radius: 3px;
    text-align: center;
    box-sizing: border-box;
}

.browse .bannerUpgrade p {
    font-size: 16px;
    font-weight: 600;
    padding: 0 20px;
}

.browse .bannerUpgrade .btn {
    background-color: #fff;
    margin-top: 10px;
    width:60%;
}

.browse .userlist {
    padding: 10px 0 0 0;
}

.browse .userlist li {
    overflow: hidden;
    width: calc((100% - 30px)/2 - 2px);
    background: #fff;
    float: left;
    margin: 0 0 10px 10px;
    border: 1px solid #ececec;
    border-radius: 3px;
    padding-bottom: 2px;
}

.browse .userlist li .avatar {
    width: 100%;
    height: 0;
    padding: 0 0 100% 0;
    background-color: #cecece;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    position: relative;
}

.browse .userlist li .avatar .lazyImg {
    padding-bottom: 100%;
}

.browse .userlist .onlineOn {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 14px;
    height: 14px;
    border-radius: 100%;
    overflow: hidden;
    background: #09d212;
    z-index: 1;
}

.browse .userlist .infobox {
    margin: 0 10px;
    padding: 10px 0 0;
    height: 59px;
    overflow: hidden;
    text-align: center;
}

.browse .userlist .namebox {
    ont-size: 13px;
    color: #333;
    height: 22px;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.browse .userlist .addressbox {
    font-size: 12px;
    color: #666;
    height: 18px;
    line-height: 18px;
    overflow: hidden;
    margin-bottom: 4px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.browse .userlist .decbox {
    font-size: 12px;
    color: #999999;
    height: 16px;
    line-height: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

</style>
